﻿<!DOCTYPE HTML>
<html>

	<head>
		<meta charset="UTF-8" />
		<title>下拉列表实战参考</title>
	</head>

	<body>
		<form action="?" id="form1">
			<select name="age" id="age" multiple>
				<!--如果标记了 mutiple可以多选name就必须以数组形式表现，后台才能获取多选结果-->
				<option value="0">请选择您的年龄</option>
				<option value="16">16岁</option>
				<option value="26">26岁</option>
				<option>56岁</option>
				<!--如果value没有给值，默认等于文本值56岁-->
			</select>
			<input type="submit" value="提交">
		</form>
		<script type="text/javascript">
			var age = document.getElementById("age");
			age.onchange = function() {
				console.log(this.value); //获取当前值
				console.log(this.options[this.selectedIndex].value); //获取当前值等同上面方法
				console.log(this.options[this.selectedIndex].text); //获取文本只能这样写

			}

			console.log("获取所有值");
			for(var i = 0; i < age.length; i++) {
				console.log(age[i].value); //获取所有值
			}

			console.log("获取所有被选中的值");
			form1.onsubmit = function() {
				for(var i = 0; i < age.length; i++) {
					if(age.options[i].selected) {
						console.log(age.options[i].value);
					}
				}
				return false;
			}

			//动态添加option选项
			var op = document.createElement("option");
			var optxt = document.createTextNode("46岁");
			op.appendChild(optxt);
			op.setAttribute("value", 46);
			age.add(op, age.options[3]);

			//动态删除option选项
			age.remove(2);
		</script>

		<pre>

知识点一：options
	select中所有<option>元素的集合

知识点二：selectedIndex 
	从0开始数起的索引顺序，如果没有选中其值为-1。对于标记multiple的多选也只能获取第一个选项的索引

知识点三：add(newOption,relOption) 在参考节点前插入新option节点

知识点四：remove(index) 移除给定位置的选项。

	
</pre>
	</body>

</html>